<template>
  <div class="dashboard-container">
    <header class="site-header">
    <!-- 品牌标识区 -->
    <div class="brand-area">
      <router-link to="/" class="brand-logo">
        <img src="@/assets/logo.svg" alt="品牌标识" class="logo-img">
      </router-link>
    </div>

    <!-- 横向导航主区域 -->
    <nav class="main-nav" aria-label="Main Navigation">
      <div class="horizontal-nav">
        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeType"
          @select="handleSelect"
          mode="horizontal"
          class="main-menu"
        >
          <el-menu-item index="All">全部</el-menu-item>
          <el-menu-item
            v-for="(type, index) in typeList"
            :key="index"
            :index="type.id"
          >
            {{ type.name }}
          </el-menu-item>
        </el-menu>

        <!-- 搜索与功能区 -->
        <div class="search-functions">
          <div class="search-bar">
            <el-input
              v-model="date.key"
              placeholder="搜索商品..."
              class="search-input"
              @input="handleSearch(date.key)"
              prefix-icon="search"
              clearable
            >
              <template #suffix>
                <el-button
                  type="primary"
                  @click="openDialog('addType')"
                  size="small"
                >
                  <el-icon><Plus /></el-icon>新增
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </nav>
  </header>


  <el-main class="product-drawer animated">
    <div  class="drawer-content">
        <div class="drawer-search">
          <div v-if="data.length === 0" class="no-results">
            📦 没有找到相关产品
          </div>
        </div>

        <div class="scroll-container">
          <div class="product-list">
            <div
              v-for="product in filteredProducts"
              :key="product.id"
              class="product-item card-container"
              @mouseenter="handleMouseEnter(product)"
            >
              <!-- 动态背景层 -->
              <div class="dynamic-background"></div>

              <!-- 产品图像 -->
              <img
                :src="product.img"
                alt="Product Image"
                class="product-image"
                loading="lazy"
                :class="{ 'image-loaded': isImageLoaded }"
              >

              <!-- 信息容器 -->
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <p class="product-description">{{ product.expalain }}</p>

          <!-- 价格与销量组合模块 -->
          <div class="price-sales-wrapper">
              <!-- 优化后的价格标签模块 -->
<div class="price-tag-group">
  <!-- 原价标识（折叠状态） -->
  <template v-if="product.startdatetime > timestamp || timestamp > product.enddatetime || product.enddatetime == null">
    <span class="original-price">¥{{ product.price }}</span>
  </template>

  <!-- 折扣组合标签（展开状态） -->
  <template v-else>

    <div class="compact-discount-card"
       :class="{ 'active': isDiscountActive }"
       @mouseenter="handleHover"
       @mouseleave="handleLeave">
    <!-- 动态价格展示 -->
    <div class="price-stack">
      <!-- 原价（带删除线效果） -->
      <span class="original-price" >
        <del>{{ product.price  }}</del>
      </span>

      <!-- 折后价（放大动画） -->
      <span class="current-price"
            :class="{ 'animate-pop': isDiscountActive }">
        {{ product.discountprice }}
        <span class="currency-symbol">¥</span>
      </span>
    </div>

    <!-- 折扣进度条（微型化） -->
    <div class="progress-bar" v-if="product.discountprice > 0">
      <div class="progress"
            :style="{
              width: product.discountprice + '%',
              height: '4px',
            }"></div>
    </div>

    <!-- 限时标签（悬浮显示） -->
    <div class="time-tag"
         v-if="(new Date(product.enddatetime2).getTime()-new Date(product.startdatetime2).getTime())/ (1000 * 3600 * 24) > 0">
      剩余{{ (new Date(product.enddatetime2).getTime()-new Date(product.startdatetime2).getTime())/ (1000 * 3600 * 24) }}天
      <span class="discount-percent">省 {{ (100-(product.discountprice/product.price)*100).toFixed(2) }}%</span>
    </div>
  </div>

  </template>
</div>


            <!-- 销量标识 -->
            <div class="sales-badge">
              <span v-if="product.salesvolume>0" class="sales-count">销量:{{ product.salesvolume }}</span>
              <span v-else class="sales-count">销量:0</span>
              <i class="fas fa-chart-bar"></i>
            </div>
          </div>
        </div>

              <!-- 操作按钮组 -->
              <div class="action-buttons">
                <el-button
                  type="primary"
                  @click="updateToCart(product.id)"
                  class="btn-add"
                >
                  🎁 促销
                </el-button>
                <el-button
                  type="primary"
                  @click="addToCart(product.id)"
                  class="btn-edit"
                >
                  ✏️ 编辑
                </el-button>
                <el-button
                  type="danger"
                  @click="learnMore(product.id)"
                  class="btn-delete"
                >
                  ❌ 删除
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination" style="margin-top: 20px; text-align: center;">
        <el-pagination
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          :current-page="date.pages.page"
          :page-size="date.pages.limit"
          :total="date.pages.total"
          layout="prev, pager, next"
        />
      </div>
      </div>
      </el-main>


    <!-- 类型编辑弹窗 -->




      <el-dialog
        v-model="editDialogVisible"
        custom-class="vivid-edit-dialog"
        append-to-body
        style="top: -60px;"
      >
        <div  class="modal-backdrop" @click="discardChanges"></div>

        <div v-loading="date.loading" class="modal-container">
          <div class="modal-header">
            <h2 class="modal-title">🎨产品编辑器</h2>
            <div class="close-icon" @click="discardChanges">
              <i class="fas fa-times-circle"></i>
            </div>
          </div>

          <div class="main-content">
            <!-- 动态卡片流 -->
            <div class="card-grid">
              <!-- 核心信息卡 -->
              <div class="card-item primary-card">
                <div class="card-headers">
                  <i class="fas fa-cube"></i> 基础信息
                </div>
                <div class="card-body">
                  <div class="field-group">
                    <div class="slider-label">产品名称</div>
                    <el-input
                      v-model="newProduct.name"
                      placeholder="产品名称"
                      prefix-icon="el-icon-edit"
                    ></el-input>
                  </div>

                  <div class="field-group">
                    <div class="slider-label">产品描述</div>
                    <el-input
                      type="textarea"
                      v-model="newProduct.expalain"
                      placeholder="产品描述"
                      prefix-icon="el-icon-description"
                      rows="3"
                    ></el-input>
                  </div>
                </div>
                <div class="card-body">
                  <div style="overflow:hidden;">
                    <div class="price-input" style="float: left;">
                      <div class="slider-label">价格</div>
                      <el-input
                        v-model="newProduct.price"
                        style="width: 250px;"
                        placeholder="原价"
                        prefix-icon="el-icon-currency"
                        type="number"
                      ></el-input>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 图片编辑卡 -->
              <div class="card-item image-card">
                <div class="card-headers">
                  <i class="fas fa-image"></i> 图片展示
                </div>
                <div class="card-body">
                  <div class="image-cropper">
                    <img
                      :src="newProduct.img"
                      alt="产品图片"
                      style="height: 300px;"
                    />
                  </div>

                  <div class="controls">
                    <el-upload
                      ref="uploadRef"
                      action="http://localhost:5293/api/products/add_upload/"
                      :before-upload="(file: File) => beforeUpload(file)"
                      accept=".jpg,.jpeg,.png"
                      show-file-list="false"
                      :on-success="(response: any) => handleSuccess(response)"
                      :on-error="handleError"
                    >
                      <el-button
                      class="update_img"
                        type="primary"
                        icon="el-icon-plus"
                        @click="chooseImage"
                      >
                        更换图片
                      </el-button>
                    </el-upload>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <el-button v-if="endatetime !== undefined" type="primary" @click="submitEdit(newProduct.name, newProduct.id, newProduct.expalain, newProduct.formattedFinalPrice, newProduct.price, newProduct.img, endatetime[0], endatetime[1])" class="save-btn">
              <i class="fas fa-check-square"></i> 确认发布
            </el-button>
            <el-button v-else type="primary" @click="submitEdit(newProduct.name, newProduct.id, newProduct.expalain, newProduct.formattedFinalPrice, newProduct.price, newProduct.img)" class="save-btn">
              <i class="fas fa-check-square"></i> 确认发布
            </el-button>
            <el-button @click="discardChanges" class="cancel-btn">
              <i class="fas fa-trash-alt"></i> 撤销更改
            </el-button>
          </div>
        </div>
      </el-dialog>
      <!--促销-->
      <el-dialog
        v-model="Promotion"
        custom-class="vivid-edit-dialog"
        append-to-body
        style="top: -60px;"
      >
        <div  class="modal-backdrop" @click="discardChanges"></div>

        <div v-loading="date.loading" class="modal-container">
          <div class="modal-header">
            <h2 class="modal-title">🎨活动策略</h2>
            <div class="close-icon" @click="discardChanges">
              <i class="fas fa-times-circle"></i>
            </div>
          </div>

          <div class="main-content">
            <!-- 动态卡片流 -->
            <div class="card-grid">
              <!-- 价格策略卡 -->
              <div class="card-item pricing-card" style="width: 750px;">
                <div class="card-body">
                  <div style="overflow:hidden;">
                    <div class="price-input" style="float: left;">
                      <div class="slider-label">原价</div>
                      <el-input
                        v-model="newProduct.price"
                        style="width: 250px;"
                        placeholder="原价"
                        prefix-icon="el-icon-currency"
                        type="number"
                      ></el-input>
                    </div>
                    <div style=" position: relative;float: left;left: 20px;">
                      <div class="slider-label">折扣时间</div>
                      <el-date-picker
                        v-model="endatetime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="default"
                      />
                    </div>
                  </div>
                  <div class="discount-slider">
                    <div class="slider-label">限时折扣</div>
                    <el-slider
                      v-model="newProduct.discount"
                      style="width: 250px;"
                      show-tooltip
                      :min="0"
                      :max="100"
                      step="1"
                      @change="calculateFinalPrice"
                    />

                    <div class="final-price">
                       折后价格:{{ (newProduct.formattedFinalPrice===0?newProduct.price:newProduct.formattedFinalPrice).toFixed(2) }}¥
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <el-button v-if="endatetime !== undefined" type="primary" @click="submitEdit(newProduct.name, newProduct.id, newProduct.expalain, newProduct.formattedFinalPrice, newProduct.price, newProduct.img, endatetime[0], endatetime[1])" class="save-btn">
              <i class="fas fa-check-square"></i> 确认发布
            </el-button>
            <el-button v-else type="primary" @click="submitEdit(newProduct.name, newProduct.id, newProduct.expalain, newProduct.formattedFinalPrice, newProduct.price, newProduct.img)" class="save-btn">
              <i class="fas fa-check-square"></i> 确认发布
            </el-button>
            <el-button @click="discardChanges" class="cancel-btn">
              <i class="fas fa-trash-alt"></i> 撤销更改
            </el-button>
            <el-button v-if="endatetime!== undefined || newProduct.discount!=0" @click="reset" >
              <i class="fas fa-trash-alt"></i> 重置
            </el-button>
          </div>
        </div>
      </el-dialog>



      <el-dialog v-model="dialogs.typeForm" >
      <el-tabs type="border-card" v-loading="date.loading" >
      <el-tab-pane label="新增类型" name="overview">
      <el-form :model="currentType">
        <el-form-item label="类型名称" required>
          <el-input v-model="currentType.name" />
        </el-form-item>
      </el-form>
        <el-button @click="dialogs.typeForm = false; currentType.name='' ">取消</el-button>
        <el-button type="primary" @click="submitTypeForm(currentType.name)">
          确认
        </el-button>
      </el-tab-pane>

      <el-tab-pane style="height: 530px;" label="新增产品" name="trend">
        <!-- 新增产品对话框 -->
      <div  v-loading="date.loading" class="modal-container">
          <div class="modal-header">
            <h2 class="modal-title">🎨新增</h2>
            <div class="close-icon" @click="discardChanges">
              <i class="fas fa-times-circle"></i>
            </div>
          </div>

          <div class="main-content">
            <!-- 动态卡片流 -->
            <div class="card-grid">
              <!-- 核心信息卡 -->
              <div class="card-item primary-card">
                <div class="card-headers">
                  <i class="fas fa-cube"></i> 基础信息
                </div>
                <div class="card-body">
                  <div class="slider-label">产品名称</div>
                  <div class="field-group">
                    <el-input
                      v-model="addProduct.name"
                      placeholder="产品名称"
                      prefix-icon="el-icon-edit"
                    ></el-input>
                  </div>

                  <div class="field-group">
                    <div class="slider-label">产品描述</div>
                    <el-input
                      type="textarea"
                      v-model="addProduct.expalain"
                      placeholder="产品描述"
                      prefix-icon="el-icon-description"
                      rows="3"
                    ></el-input>
                  </div>
                  <div>
                    <div class="slider-label">产品类别</div>
                  <el-select
                    v-model="date.type"
                    placeholder="产品类别"
                    size="large"
                    style="width: 240px"
                  >
                    <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </div>
                  <div class="price-input" style="float: left;">
                      <div class="slider-label">原价</div>
                      <el-input
                        v-model="addProduct.price"
                        style="width: 250px;"
                        placeholder="原价"
                        prefix-icon="el-icon-currency"
                        type="number"
                        @change="calculateFinalPrice"
                      ></el-input>
                    </div>
                </div>
              </div>

              <!-- 图片编辑卡 -->
              <div class="card-item image-card">
                <div class="card-headers">
                  <i class="fas fa-image"></i> 图片展示
                </div>
                <div style=" padding: 5px;height: 350px;">
                  <div class="image-cropper">
                    <img
                      :src="addProduct.img"
                      alt="产品图片"
                      style="height: 300px;"
                    />
                  </div>

                  <div style="margin-top:-95px;text-align: right;">
                    <el-upload
                      ref="uploadRef"
                      action="http://localhost:5293/api/products/add_upload/"
                      :before-upload="(file: File) => beforeUpload(file)"
                      accept=".jpg,.jpeg,.png"
                      show-file-list="false"
                      :on-success="(response: any) => addhandleSuccess(response)"
                      :on-error="handleError"
                    >
                      <el-button
                        type="primary"
                        icon="el-icon-plus"
                        @click="chooseImage"
                      >
                        选择图片
                      </el-button>
                    </el-upload>
                  </div>
                </div>
              </div>

            </div>
          </div>

          <div class="modal-footer">
            <el-button type="primary" @click="add_Products(addProduct.name, date.type, addProduct.expalain, addProduct.formattedFinalPrice, addProduct.price, addProduct.img)" class="save-btn">
              <i class="fas fa-check-square"></i> 确认发布
            </el-button>



            <el-button @click="adddiscardChanges" class="cancel-btn">
              <i class="fas fa-trash-alt"></i> 撤销
            </el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref,computed } from 'vue'
import {
  get_products_types,
  update_Product_Type,
  delete_Product_type,
  details_products,
  add_products_types,
  Details_Products_single,
  update_Product,
  add_product,
  delete_Product,
  get_products
} from '@/api/products'
import { ElMessage, ElMessageBox } from 'element-plus';
import { ElDatePickervalue } from 'element-plus';

const date = reactive({
  isFirst: true,
  data: [],
  Products: [],
  loading: false,
  key: "",
  details_key:"",
  details_key_id:"",
  type:"",
  pages: {
    page: 1,
    limit: 4,
    total: 0,
  },
  time1:"",
  time2:""
});
const timestamp = new Date().toISOString().replace('T', ' ').slice(0, 19);

// 类型定义
interface ProductType {
  id: string
  name: string
  count: number
  datetime: string
}
interface Data {
  id: string
  name: string
  price: number
  datetime: string
  img:string
  expalain:string
  list:number,
  enddatetime:string,
  startdatetime:string,
  discountprice:number,
  enddatetime2:string,
  startdatetime2:string,
  salesvolume:number
}

// 响应式状态
const currentType = reactive<ProductType>({
  id: '',
  name: '',
  count: 0,
  datetime: ''
})
const updateType = reactive<ProductType>({
  id: '',
  name: '',
  count: 0,
  datetime: ''
})
const newProduct = ref({
  id:"",
  name: "",
  price: 0,
  img: "",
  expalain: "",
  discount:0,
  formattedFinalPrice:0,
  endatetime:"",
});
const endatetime = ref<ElDatePickervalue | undefined>([
      date.time1,
      date.time2
    ]);
const addProduct = ref({
  id:"",
  name: "",
  price: 0,
  img: "",
  expalain: "",
  discount:0,
  formattedFinalPrice:0,
  endatetime:"",
  type_id:""
});

const dialogs = reactive({
  typeForm: false,
  productManagement: false
})

const dialogType = ref<'add' | 'edit'>('add')
const visible=ref(false);
const editDialogVisible = ref(false);
const Promotion = ref(false);

const add_products = ref(false);

const typeList = ref<ProductType[]>([])
const data = ref<Data[]>([])

  const activeType = ref("All");
const handleSelect = (type: any) => {
  activeType.value = type;
};
const filteredProducts = computed(() => {
  if (activeType.value === "All") {
    return data.value;
  }
  return data.value.filter((d) => d.typeid === activeType.value);
});

// 核心方法
const fetchTypes = async (key?:string) => {
  date.loading = true;
  try {
    const res2 = await get_products({
        key: key || "",
        page: date.pages.page,
        limit: date.pages.limit,
      });
      if (res2.code === 0) {
        data.value = res2.data.data;
        date.pages!.total = res2.data.total;
      }
  } catch (error) {
    console.error('获取类型失败:', error)
    ElMessage.error('获取类型失败');
  }
}
const fetchTypes2 = async () => {
  date.loading = true;
  try {
    const res = await get_products_types({
      key: "",
    })
    if(res.code===0){
      typeList.value = res.data.data
      date.loading = false;
    }
  } catch (error) {
    console.error('获取列表失败:', error)
    ElMessage.error('获取列表失败');
  }
}
const reset=()=>{
  newProduct.value.discount=0
  endatetime.value=undefined
  newProduct.value.formattedFinalPrice=newProduct.value.price
}
const chooseImage=async()=>{}
const add_pro=async()=>{
  addProduct.value = {
    id:"",
    name: "",
    price: 0,
    img: "",
    expalain: "",
    discount:0,
    formattedFinalPrice:0,
    endatetime:"",
    type_id:date.details_key_id
  };
  add_products.value=true
}
// 分页处理函数
const handlePageChange = (currentPage: number) => {
  date.pages.page = currentPage;
  fetchTypes();
};

const handleSizeChange = (newLimit: number) => {
  date.pages.limit = newLimit;
  date.pages.page = 1; // 切换每页数量时重置页码
  fetchTypes();
};

const beforeUpload = (file: File) => {
  const isJPGorPNG = file.type === "image/jpeg" || file.type === "image/png";
  if (!isJPGorPNG) {
    ElMessage.error("只能上传 JPG 或 PNG 格式的图片!");
    return false;
  }
  return true; // 允许上传
};
const adddiscardChanges=()=>{
  add_products.value=false
}
const handleSuccess = async (response: any, product?: Data) => {
  if (response.code === 0) {
    if (product !== undefined) {
      product.img = response.data;
    } else {
      newProduct.value.img = response.data;
    }
  } else {
    ElMessage.error('上传图片失败');
  }
};
const addhandleSuccess = async (response: any, product?: Data) => {
  if (response.code === 0) {
    if (product !== undefined) {
      product.img = response.data;
    } else {
      addProduct.value.img = response.data;
    }
  } else {
    ElMessage.error('上传图片失败');
  }
};

const submitEdit=async(name:string,id:string,expalain:string,formattedFinalPrice:number,price:number,img:string,start_time?:Date,end_time?:Date)=>{
  const res=await update_Product({
    id:id,
    name:name,
    enddatetime:end_time||new Date(0),
    startdatetime:start_time||new Date(0),
    expalain:expalain,
    discountprice:formattedFinalPrice || price,
    img:img,
    price:price
  })
  if(res.code===0){
    editDialogVisible.value = false;
    Promotion.value=false
    ElMessage({message: '产品更新成功',type: 'success',})
    fetchTypes()
    showTypeDetail(date.details_key_id,date.details_key)

  } else {
    ElMessage.error('产品更新失败');
  }
}


const add_Products=async(name:string,id:string,expalain:string,formattedFinalPrice:number,price:number,img:string,start_time?:Date,end_time?:Date)=>{
  const res=await add_product({
    name:name,
    enddatetime:end_time||new Date(0),
    startdatetime:start_time||new Date(0),
    expalain:expalain,
    discountprice:formattedFinalPrice || price,
    img:img,
    price:price,
    typeid:id
  })
  if(res.code===0){
    add_products.value = false;
    fetchTypes()
    fetchTypes2()
    showTypeDetail(date.details_key_id,date.details_key)
    ElMessage({message: '产品更新成功',type: 'success',})
    dialogs.typeForm=false;
    addProduct.value.name="";
    addProduct.value.expalain="";
    addProduct.value.price=0;
    addProduct.value.img="";
    date.type="";
  } else {
    ElMessage.error('产品更新失败');
  }
}
const openDialog = (type: 'addType' | 'editType', data?: ProductType) => {
  dialogType.value = type === 'addType' ? 'add' : 'edit'
  if (data) Object.assign(currentType, data)
  dialogs.typeForm = true
}

const submitTypeForm = async (name:string,id?:string,) => {
  date.loading = true;
  try {
    let res;
    if(id){
      res=await update_Product_Type({
        id:id,
        name:name
      })
    } else {
      res=await add_products_types({
        name:name
      })
    }
    if(res.code===0){
      ElMessage({message: `${id ? '修改' : '添加'}成功`,type: 'success',})
      fetchTypes()
      fetchTypes2()
      date.loading= false
      dialogs.typeForm=false
      currentType.name="";
      showTypeDetail(date.details_key_id,date.details_key)
    }else{
      ElMessage.error(`${id ? '修改' : '添加'}失败`)
    }
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败');
  }
}


const discardChanges=()=>{
 editDialogVisible.value=false
}
const showTypeDetail = async (id:string,key?:string) => {
  visible.value=true
  date.details_key_id=id
  date.loading=true
  const res = await details_products({
    id:id,
    key:key||""
  })
  if(res.code===0){
    data.value = res.data.data
    date.loading=false
  }

}

const addToCart=async(id:string)=>{
  editDialogVisible.value = true;
  date.loading=true
  const res = await Details_Products_single({
    id:id
  })
  date.loading=false
  if(res.code===0){
    newProduct.value = res.data.data[0]
    newProduct.value.discount= (res.data.data[0].discountprice/res.data.data[0].price)*100
    newProduct.value.formattedFinalPrice=res.data.data[0].discountprice
    if(res.data.data[0].startdatetime!=null){
      endatetime.value[0]=res.data.data[0].startdatetime
    endatetime.value[1]=res.data.data[0].enddatetime
    }


    date.loading=false
  }
  date.loading=false
}
const updateToCart=async(id:string)=>{
  Promotion.value = true;
  date.loading=true
  const res = await Details_Products_single({
    id:id
  })
  if(res.code===0){
    newProduct.value = res.data.data[0]
    newProduct.value.discount= (res.data.data[0].discountprice/res.data.data[0].price)*100
    newProduct.value.formattedFinalPrice=res.data.data[0].discountprice
    if(res.data.data[0].startdatetime!=null){
      endatetime.value[0]=res.data.data[0].startdatetime
    endatetime.value[1]=res.data.data[0].enddatetime
    }
    date.loading=false
  }
  date.loading=false
}


const handleSearch=(key:string)=>{
  date.pages.page=1
  fetchTypes(key);
}
const handleSearch_details=(id:string,key:string)=>{
  showTypeDetail(id,key)
}


const calculateFinalPrice=()=>{
  newProduct.value.formattedFinalPrice= newProduct.value.price*(newProduct.value.discount/100)
}
const addcalculateFinalPrice=()=>{
  addProduct.value.formattedFinalPrice= addProduct.value.price*(addProduct.value.discount/100)
}
const learnMore = async (id: string) => {
  try {
    await ElMessageBox.confirm('确定删除该商品？', '警告', {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'error'
    })
    date.loading = true;
    const res=await delete_Product({
        id:id
    })
    if(res.code===0){
      showTypeDetail(date.details_key_id)
      fetchTypes()
      ElMessage({message: '删除成功',type: 'success',})
      date.loading= false
    }else{
      ElMessage.error('删除失败')
      date.loading= false
    }
  } catch (error) {
    console.log('取消删除')
  }
}

const confirmDelete = async (id: string) => {
  try {
    await ElMessageBox.confirm('确定删除该类型及其所有商品？', '警告', {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'error'
    })
    date.loading = true;
    const res= await delete_Product_type({id:id})
    if(res.code===0){
      ElMessage({message: '删除成功',type: 'success',})
      fetchTypes()
      date.loading= false
    }else{
      ElMessage.error('删除失败')
      date.loading= false
    }
  } catch (error) {
    console.log('取消删除')
  }
}

// 初始化
fetchTypes()
fetchTypes2()
</script>
<style lang="scss" scoped>
/* 新增价格标签动画 */
@keyframes pricePulse {
  0% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

.compact-discount-card {
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f8fafc);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  /* 悬停状态 */
  &.active {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  }

  /* 价格叠压效果 */
  .price-stack {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;


    /* 当前价格放大效果 */
    .current-price {
      font-size: 1.2rem;
      color: #ff6b6b;

      /* 价格飘入动画 */
      @keyframes animate-pop {
        0% { transform: scale(0.9); opacity: 0; }
        90% { transform: scale(1.1); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }
    }
  }

  /* 进度条样式 */
  .progress-bar {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;

    .progress {
      height: 100%;
      background: linear-gradient(90deg,
        transparent 40%,
        #ff6b6b 40%,
        #ff6b6b 60%,
        transparent 60%
      );
      transition: width 0.3s ease;
    }
  }

  /* 限时标签 */
  .time-tag {
    background: #ff6b6b;
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
}

/* 动画定义 */
@keyframes strikeThrough {
  to {
    text-decoration: none;
    opacity: 0;
  }
}
.price-tag-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  .current-price {
    animation: pricePulse 1.5s infinite;
    position: relative;

    &::after {
      content: "↓";
      position: absolute;
      right: -15px;
      top: 0;
      color: #ff6b6b;
      font-size: 0.8em;
    }
  }
  /* 折扣卡片动画 */
  .discount-card {
    background: linear-gradient(135deg, #fff, #f8fafc);
    border-radius: 15px;
    padding: 1rem;
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    animation: fadeInUp 0.3s ease;

    /* 价格数字间距 */
    .price-value, .original-value {
      margin-right: 0.3rem;
      font-weight: 500;
    }

    /* 折扣进度条 */
    .discount-bar {
      height: 4px;
      background: #ff6b6b;
      border-radius: 2px;
      margin: 0.8rem 0;
    }
  }

  /* 限时标签悬浮效果 */
  .limited-time-tag {
    background: #ff6b6b;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(255,107,107,0.3);
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    font-size: 1rem;
    gap: 0.5rem;
  }
}

/* 动画定义 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 信息密度优化 */
.price-sales-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.sales-badge {
  display: flex;
  align-items: center;
  background: linear-gradient(45deg, #4ecdc4, #45b7af);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-top: 0.5rem;

  /* 销量徽章动画 */
  animation: salesFloat 1.5s ease-in-out infinite;

  .sales-count {
    font-weight: bold;
    margin-right: 0.4rem;
  }
}

@keyframes salesFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .sales-badge {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }
}
.update_img{
  margin-top:125px ;
}
.site-header {

  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 10px 40px;
  transition: background 0.3s ease;

  /* 品牌标识区 */
  .brand-area {
    margin-right: 40px;
  }

  .brand-logo {
    display: flex;
    align-items: center;
    height: 100%;
  }

  .logo-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s ease;
  }

  /* 横向导航主区域 */
  .main-nav {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .horizontal-nav {
      display: flex;
      flex: 1;
      align-items: center;
      gap: 40px;
    }

    /* 导航菜单样式 */
    .main-menu {
      display: flex;
      flex: 2;
      gap: 30px;
      list-style: none;
      padding: 0;
      margin: 0;

      .el-menu-item {
        font-size: 1.2rem;
        color: #333;
        padding: 8px 16px;
        border-radius: 24px;
        transition: all 0.3s ease;
        position: relative;

        &.is-active {
          background: #ffffff;
          box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
        }

        &:hover:not(.is-active) {
          background: #f0f4ff;
          transform: translateY(-2px);
        }
      }
    }

    /* 搜索区样式 */
    .search-functions {
      flex-grow: 1;
    }

    .search-bar {
      position: relative;

      .search-input {
        width: 100%;
        padding: 12px 24px;
        border-radius: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background: white;
        transition: all 0.3s ease;

        &::placeholder {
          color: #999;
          font-size: 1.1rem;
        }
      }

      .el-button {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        padding: 8px 16px;
      }
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .site-header {
      padding: 16px;
      height: 60px;
    }

    .brand-area {
      margin-right: 20px;
    }

    .horizontal-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      padding: 20px;
      flex-direction: column;
      gap: 20px;
    }

    .horizontal-nav.active {
      display: flex;
    }

    .search-functions {
      flex-grow: 0;
    }
  }
}

.vivid-edit-dialog {
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.modal-backdrop {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.08);
  z-index: 1;
}

.modal-container {

  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 30px;
  min-height: 300px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 60px;
}

.card-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.card-item:hover {
  transform: translateY(-5px);
}

.card-headers {
  padding: 15px;
  background-color: #f8f9fa;
  border-bottom: 2px solid #eee;
  display: flex;
  align-items: center;
}

.card-body {
  padding: 5px;
  height: 180px;
}

.field-group {
  margin-bottom: 15px;
}

.image-cropper {
  height: 400px;
  object-fit: cover;
}

.controls {
  margin-top:-220px;
  text-align: right;
}

.save-btn {
  padding: 12px 25px;
  background-color: #4CAF50;
  border-color: transparent;
  transition: transform 0.3s ease;
}

.save-btn:hover {
  transform: scale(1.05);
}

.cancel-btn {
  padding: 12px 25px;
  background-color: #f44336;
  border-color: transparent;
}

/* 高级视觉效果 */
.card-item::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background-color: inherit;
  border-radius: 10px;
  opacity: 0.1;
  z-index: -1;
}

.card-item:hover::before {
  opacity: 0.15;
}

/* 整体布局优化 */
.product-drawer {
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);
  min-height: 100vh;
  overflow: hidden;
  .drawer-search {
    margin-bottom: 24px;
    padding: 0 24px;

    .search-input {
      width: 100%;
      max-width: 600px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);

      .el-input__inner {
        font-size: 16px;
        color: #2c3e50;
      }

      .el-input__prefix {
        color: #409eff;
      }
    }

    .no-results {
      text-align: center;
      color: #7f8c8d;
      font-size: 16px;
      margin-top: 24px;
    }
  }

  .scroll-container {
    height: calc(100vh - 200px);
    overflow: hidden;

    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background: #fff;
    }
    &::-webkit-scrollbar-thumb {
      background: #409eff;
      border-radius: 3px;
      transition: background 0.3s;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #64b5f6;

    }
  }

  .product-item {
    flex: 1 0 300px; /* 最小宽度 200px，自动扩展 */
  max-width: 23%; /* 最大宽度不超过容器的 30% */
    position: relative;
    width: 45%;
    min-height: 320px;
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 50%, #fff 100%);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 12px 24px rgba(0,0,0,0.05);

  &:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
      0 8px 16px rgba(0,0,0,0.15),
      0 24px 48px rgba(0,0,0,0.08);
    background:
      linear-gradient(135deg, #f0f4ff 0%, #e0e6ed 50%, #f8f9fa 100%);

    .action-buttons {
      opacity: 1;
      transform: translateY(0);
    }
  }

    &.hovered {
      transform: translateY(-8px) rotateY(3deg);
      z-index: 2;

      .dynamic-background {
        opacity: 0.8;
      }

    }

    .dynamic-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      filter: blur(4px) brightness(0.9);
      opacity: 0.3;
      z-index: -1;
    }

    .product-image {
      width: 100%;
      height: 240px;
      object-fit: cover;
      transition: transform 0.3s;

      .lazy-loaded {
        animation: fadeIn 0.5s;
      }
    }

    .product-info {
      padding: 24px;
      position: relative;
      z-index: 0;

      .product-name {
        font-size: 24px;
        color: #2c3e50;
        margin-bottom: 8px;
        line-height: 1.2;
      }

      .product-description {
        font-size: 16px;
        color: #7f8c8d;
        margin-bottom: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .product-price-wrapper {
        position: relative;
        padding: 8px 16px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);

        .product-price {
          font-size: 26px;
          color: #ec407a;
          font-weight: 600;
        }

        .price-tag {
          position: absolute;
          right: 0px;
          top: 30px;
          padding: 4px 8px;
          background: #fff;
          border: 1px solid #ec407a;
          border-radius: 4px;
          font-size: 12px;
          color: #ec407a;
        }
        .price-tag2 {
          position: absolute;
          right: 0px;
          top:  0px;
          padding: 4px 8px;
          background: #fff;
          border: 1px solid #ec407a;
          border-radius: 4px;
          font-size: 12px;
          color: #ec407a;
          width: 90px;
        }
      }
    }

    .action-buttons {
      position: absolute;
      bottom: 24px;
      right: 24px;
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.3s ease-out;

      .btn-edit {
        padding: 5px 8px;
        font-size: 12px;
      }

      .btn-delete {
        padding: 5px 8px;
        font-size: 12px;
      }
      .btn-add{
        opacity: 1;
        padding: 5px 8px;
        font-size: 12px;
      }
    }
  }
}

/* 动画效果增强 */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
/* 产品管理抽屉核心样式 */
.product-drawer {
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.08);



}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
// 1. 动态价格标签
.product-price {
  position: relative;
  padding: 4px 8px;
  color: white;
  border-radius: 4px;
  animation: pulse 1s infinite;

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
}


// 3. 3D阴影增强
.product-item {
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 12px 24px rgba(0,0,0,0.05);

  &:hover {
    box-shadow:
      0 8px 16px rgba(0,0,0,0.15),
      0 24px 48px rgba(0,0,0,0.08);
  }
}

// 4. 智能背景渐变
.product-item {
  background:
    linear-gradient(135deg, #fff 0%, #f8f9fa 50%, #fff 100%);

  &:hover {
    background:
      linear-gradient(135deg, #f0f4ff 0%, #e0e6ed 50%, #f8f9fa 100%);
  }
}

// 5. 交互式操作按钮
.action-buttons {
  .el-button {
    &:nth-child(1) { transition-delay: 0.0s; }
    &:nth-child(2) { transition-delay: 0.0s; }
  }

  .product-item:hover & {
    opacity: 0.7;
    transform: translateY(0);
  }

}
.product-price {
  color: red;
  font-weight: bold;
}
.product-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  width: calc(33.33% - 20px);
  box-sizing: border-box;
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.product-item:hover {

  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.product-image {
  width: 100%;
  height: 200px; /* 设置固定高度 */
  object-fit: cover;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
  width: 105%;
  gap: 16px;
  padding: 20px;
  border-radius: 8px;
}
.product-management-drawer {
  .drawer-content {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .action-bar {
      display: flex;
      gap: 16px;
      margin-bottom: 20px;

      .search-input {
        max-width: 300px;
      }
    }

    .product-name {
      display: flex;
      align-items: center;
      gap: 12px;

      .product-thumb {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        background: #f5f7fa;

        .image-error {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #c0c4cc;
        }
      }
    }

    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 24px;
  background: radial-gradient(circle at 50% 0%, #f8f9fa 0%, #ffffff 100%);
}

.type-card {
  position: relative;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  cursor: pointer;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 25%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 75%
    );
    transform: skewX(-20deg);
    transition: left 0.6s;
  }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(64, 158, 255, 0.15);

    &::before {
      left: 100%;
    }
  }

  .card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
      rgba(64, 158, 255, 0.1) 0%,
      rgba(64, 158, 255, 0.05) 30%,
      transparent 70%
    );
    pointer-events: none;
  }

  .card-content {
    padding: 24px;
  }

  .card-header {
    position: relative;
    margin-bottom: 20px;

    .type-name {
      font-size: 20px;
      color: #2c3e50;
      font-weight: 600;
      margin: 0;
      line-height: 1.4;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .product-count {
        font-size: 24px;
        color: #409eff;
        font-weight: 700;
      }
    }

    .timeline {
      position: relative;
      height: 2px;
      margin-top: 16px;
      background: linear-gradient(90deg, #409eff 0%, rgba(64, 158, 255, 0) 100%);

      &-track {
        position: absolute;
        left: 0;
        top: -3px;
        width: 40px;
        height: 8px;
        background: #409eff;
        clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
      }

      &-icon {
        position: absolute;
        right: -12px;
        top: -14px;
        font-size: 20px;
        color: #409eff;
        background: white;
        border-radius: 50%;
        padding: 4px;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
      }
    }
  }

  .meta-info {
    border-top: 1px solid rgba(64, 158, 255, 0.1);
    padding-top: 16px;

    .meta-item {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      padding: 8px;
      background: rgba(64, 158, 255, 0.03);
      border-radius: 8px;
      transition: all 0.3s;

      &:hover {
        transform: translateX(8px);
        background: rgba(64, 158, 255, 0.1);
      }

      .meta-icon {
        font-size: 18px;
        color: #409eff;
        margin-right: 12px;
        padding: 6px;
        background: rgba(64, 158, 255, 0.1);
        border-radius: 8px;
      }

      .meta-text {
        font-size: 14px;
        color: #7f8c8d;
      }
    }
  }

  .card-actions {
    border-top: 1px solid rgba(64, 158, 255, 0.1);
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(64, 158, 255, 0.02);
  }
}

@media (max-width: 768px) {
  .type-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .type-card {
    .card-content {
      padding: 16px;
    }

    .card-header .type-name {
      font-size: 18px;

      .product-count {
        font-size: 20px;
      }
    }
  }
}
.dashboard-container {
  padding: 24px;
  background: #f8f9fa;
}

.action-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.type-card {
  transition: transform 0.3s;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .card-header {
    padding: 16px;

    h3 {
      margin: 0 0 8px;
      font-size: 18px;
    }
  }

  .meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #666;
  }

}

@media (max-width: 768px) {
  .type-grid {
    grid-template-columns: 1fr;
  }

  .action-bar {
    flex-direction: column;
  }
}
</style>
